<template>
  <div class="home-header">
    寿光云
    <div class="custom-placeholder-wrap">
      <van-icon name="search" color="#77b3be" class="search-content" />
      <van-field
        v-model="value"
        label="文本"
        placeholder="大家都在搜"
        label-width="0"
        class="header-field"
      >
        <template #label>
          <div></div>
        </template>
      </van-field>
      <van-icon name="scan" color="#77b3be" class="scan-content" />
    </div>
  </div>
</template>

<script>
export default {
  name: "homeHeader",
  data() {
    return {
      value: ""
    };
  }
};
</script>

<style lang="scss" scoped>
.home-header {
  padding: 0 24px;
  height: 100px;
  display: flex;
  align-items: center;
  .scan-content {
    height: 26px;
    width: 26px;
    vertical-align: middle;
  }
}
</style>
<style lang="scss">
.home-header {
  .custom-placeholder-wrap {
    display: flex;
    align-items: center;
    .search-content {
      position: relative;
      left: 20px;
      z-index: 1;
    }
    .scan-content {
      position: relative;
      right: 24px;
      top: 4px;
      z-index: 1;
    }
    .header-field {
      width: 170px;
      border-radius: 12px;
      padding: 0 28px 0 12px;
      background-color: rgba(119, 179, 190, 0.3);
    }
    .van-field__control::-webkit-input-placeholder {
      color: #77b3be;
    }
  }
}
</style>
